<template>
  <div>
    <el-dialog v-model="DialogVisible"  :title="title" >
      <template #header>
        <slot name="FormHeader"></slot>
      </template>
      <slot name="FormContent"></slot>
      <template #footer>
        <div>
          <el-button @click="Cancel">取消</el-button>
          <el-button type="primary" @click="Sure">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {computed} from "vue";

const dialogConfig = defineProps({
  title: {
    required: true,
    type: String,
  },
  visible: {
    default: false
  }
})
const BaseDialogEmit = defineEmits(['SureFormDialog', 'CancelFormDialog', 'DialogVisibleListener']);
const DialogVisible = computed({
  get: () => dialogConfig.visible,
  set: (val) => BaseDialogEmit('DialogVisibleListener', val)
});

function Sure() {
  BaseDialogEmit('SureFormDialog');
}

function Cancel() {
  BaseDialogEmit('CancelFormDialog');
}
</script>

<style scoped>

</style>